<!-- 插槽概念很重要 -->
<!-- 插槽使用场景：子组件模板中不仅要展示原来的东西，还要有其他的。
在以前都可以使用父组件向子组件传值的方法。 -->
<!-- 先使用父向子传值的方法，但是会遇到一个问题，就是假如传递的是一个html标签，
它并不会自动去显示，而是当成字符串。所以要用到v-html指令。并且还有一个问题，
父只传递了p标签，但是如果想正常显示，那么就必须在外面套一个额外的标签去使用v-html。
所以这是不行。 -->
<!-- 那么如何解决呢？使用vue插槽就可以了 -->
<!-- 再看一个需求，一个子组件只展示主体内容，header和footer都是通过插槽传递的 -->
<!-- 有一点需要注意，就是子组件中所有的内容都是 slot，所以肯定会有一种办法让 slot只展示一种内容，
这里就是一个slot展示header，一个展示footer 。-->
<!-- 这就涉及到了具名插槽的知识，即可以给插槽起名字 -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <child>
      <div class="header" slot="header">header</div>
      <div class="footer" slot="footer">footer</div>
    </child>
  </div>
  <script>
    Vue.component('child',{
      template:`<div>
                  <slot name="header">111</slot>
                  <div>body</div>
                  <slot name="footer"></slot>
                </div>`
    })

    let app=new Vue({
      el:"#root",
      data:{

      }
    })


    // Vue.component('child',{
    //   template:`<div>123<div v-html='selfContent'></div></div>`,
    //   props:{
    //     content:String
    //   },
    //   data(){
    //     return {
    //       selfContent:this.content
    //     }
    //   }
    // })

    // let app=new Vue({
    //   el:"#root",
    //   data:{

    //   }
    // })
  </script>
</body>
</html>